Megadeth (Band) Puzzles
Implemented jQuery UI elements with JavaScript
Implemented jQuery UI elements with JavaScript
This project was really fun to do. I had to decide what to make for one of my finals in my Intermediate Scripting class. I wanted to somehow incorporate one of my favorite metal bands into this project.
I started by getting some images of my favorite band, Megadeth, off of Google. I sized them up individually (4x4) with a set height and width, then used HTML to set up my grid. Then I added in some CSS styling to make each puzzle look nice.
Using jQuery UI elements, I started the puzzle by making each tile piece sortable. Next was setting up the on-click events: shuffle pieces when 'Start' is clicked, 'Hint' and 'Hide' buttons to fade in and fade out the correct puzzle image, and 'Next' button to go on to the next puzzle.
Lastly and probably the most troublesome, was setting up a function to alert a message box saying, 'Rock On!!' when each list-item piece was placed in the correct order.
I started by getting some images of my favorite band, Megadeth, off of Google. I sized them up individually (4x4) with a set height and width, then used HTML to set up my grid. Then I added in some CSS styling to make each puzzle look nice.
Using jQuery UI elements, I started the puzzle by making each tile piece sortable. Next was setting up the on-click events: shuffle pieces when 'Start' is clicked, 'Hint' and 'Hide' buttons to fade in and fade out the correct puzzle image, and 'Next' button to go on to the next puzzle.
Lastly and probably the most troublesome, was setting up a function to alert a message box saying, 'Rock On!!' when each list-item piece was placed in the correct order.
If you would like to view my puzzle, please click the link below.
Thanks!
www.cwikdonald.aisites.com/megadeth_puzzle/puzzle.html
Photography Credits To:
Wikipedia
Loudwire.com
OnlyHDwallpapers.com
Real Rock Report
Thanks!
www.cwikdonald.aisites.com/megadeth_puzzle/puzzle.html
Photography Credits To:
Wikipedia
Loudwire.com
OnlyHDwallpapers.com
Real Rock Report